<template>
  <div class="app-container">
    <div>
      <el-table :data="tableData">
        <el-table-column prop="name" :label="$t('用户名')"></el-table-column>
        <el-table-column prop="ip" :label="$t('客服端IP地址')"></el-table-column>
        <el-table-column prop="querystring" :label="$t('操作内容描述')"></el-table-column>
        <el-table-column prop="os" :label="$t('操作系统')"></el-table-column>
        <el-table-column prop="create_time" :label="$t('操作时间')"></el-table-column>
      </el-table>

      <div class="pagination_box">
        <el-pagination
          background
          
          @current-change="handleCurrentChange"
          :current-page="page"
          :page-size="page_size"
          layout="total, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
    </div>
    <refresh @click="handleRefresh"></refresh>
  </div>
</template>

<script>
import util from '@/assets/js/util.js'
export default {
  name: 'set-log',
  data() {
    return {
      page: 1,
      page_size: 20,
      total: 0,
      tableData: [],
    };
  },
  mounted() {
    this.getData()
  },
  methods: {
    handleRefresh() {
      this.page = 1
      this.page_size = 20
      this.getData()
    },
    getData() {
      util.$http('/set/log?page=' + this.page, {
        page_size: this.page_size
      })
      .then(res=>{
        if(res.code == 1) {
          this.total = res.data.total
          this.tableData = res.data.list
        }
      })
    },
    handleCurrentChange(val) {
      this.page = Number(val)
      this.getData()
    }
  }
};
</script>

<style scoped>
.pagination_box {
  padding-top: 30px;
}
.pagination_box .el-pagination {
  display: flex;
  justify-content: flex-end;
}
</style>
